<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - HzSparrowAI</title>
    <link rel="stylesheet" href="css/index-font.css">
    <link rel="stylesheet" href="assets/icons/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-gradient: linear-gradient(135deg, #4361ee, #3a0ca3);
            --secondary-color: #7209b7;
            --accent-color: #4cc9f0;
            --primary-light: rgba(67, 97, 238, 0.1);
            --bg-color: #f8fafc;
            --card-bg: #ffffff;
            --text-color: #1f2937;
            --text-secondary: #4b5563;
            --border-color: #e5e7eb;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -5px rgba(0, 0, 0, 0.04);
            --radius: 12px;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', 'Noto Sans SC', sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(67, 97, 238, 0.05) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(76, 201, 240, 0.05) 0%, transparent 20%);
            position: relative;
            overflow: hidden;
        }
        
        body::before {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background: linear-gradient(45deg, 
                rgba(67, 97, 238, 0.03) 0%, 
                rgba(76, 201, 240, 0.03) 100%);
            z-index: -1;
        }
        
        .decoration {
            position: absolute;
            border-radius: 50%;
            z-index: -1;
        }
        
        .decoration-1 {
            width: 300px;
            height: 300px;
            background: linear-gradient(45deg, rgba(67, 97, 238, 0.05), rgba(58, 12, 163, 0.05));
            top: -150px;
            left: -100px;
        }
        
        .decoration-2 {
            width: 200px;
            height: 200px;
            background: linear-gradient(45deg, rgba(76, 201, 240, 0.05), rgba(67, 97, 238, 0.05));
            bottom: -100px;
            right: -50px;
        }
        
        .container {
            background-color: var(--card-bg);
            border-radius: var(--radius);
            box-shadow: var(--shadow-lg);
            padding: 40px;
            width: 420px;
            max-width: 90%;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            transition: transform 0.3s ease;
        }
        
        .container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--primary-gradient);
        }
        
        .container::after {
            content: '';
            position: absolute;
            top: 5px;
            right: 0;
            width: 5px;
            height: 40px;
            background: var(--primary-gradient);
        }
        
        .logo {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .logo h1 {
            color: var(--primary-color);
            margin: 15px 0 5px;
            font-size: 24px;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .logo-icon {
            font-size: 48px;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 25px;
        }
        
        .tab {
            flex: 1;
            padding: 12px;
            text-align: center;
            cursor: pointer;
            font-weight: 500;
            color: var(--text-secondary);
            border-bottom: 2px solid transparent;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }
        
        .tab:hover {
            color: var(--primary-color);
        }
        
        .tab.active {
            color: var(--primary-color);
        }
        
        .tab.active::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: var(--primary-gradient);
            animation: slideIn 0.3s ease-out;
        }
        
        @keyframes slideIn {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }
        
        .tab-content {
            display: none;
            animation: fadeIn 0.3s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .tab-content.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 20px;
            position: relative;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-color);
            transition: all 0.3s;
        }
        
        input[type="text"],
        input[type="password"],
        input[type="email"] {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.3s;
            color: var(--text-color);
            background-color: var(--card-bg);
            box-shadow: var(--shadow-sm);
        }
        
        input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }
        
        button {
            width: 100%;
            background: var(--primary-gradient);
            color: white;
            border: none;
            padding: 14px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            font-size: 16px;
            transition: all 0.3s;
            box-shadow: var(--shadow-sm);
            position: relative;
            overflow: hidden;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        button::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }
        
        @keyframes ripple {
            0% { transform: scale(0, 0); opacity: 0.5; }
            100% { transform: scale(30, 30); opacity: 0; }
        }
        
        button:focus:not(:active)::after {
            animation: ripple 1s ease-out;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            color: white;
            border-radius: 8px;
            box-shadow: var(--shadow-md);
            z-index: 1000;
            transform: translateX(150%);
            transition: transform 0.3s ease-out;
        }
        
        .notification {
            background: var(--primary-gradient);
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        .notification.success {
            background: linear-gradient(135deg, #10b981, #059669);
        }
        
        .notification.error {
            background: linear-gradient(135deg, #ef4444, #dc2626);
        }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: var(--bg-color);
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--secondary-color);
        }
        
        /* 响应式设计 */
        @media (max-width: 460px) {
            .container {
                padding: 30px 20px;
            }
        }
    </style>
</head>
<body>
    <div class="decoration decoration-1"></div>
    <div class="decoration decoration-2"></div>
    
    <div class="container">
        <div class="logo">
            <i class="bi bi-chat-square-text-fill logo-icon"></i>
            <h1>HzSparrowAI</h1>
        </div>
        
        <div class="tabs">
            <div class="tab active" data-tab="login">登录</div>
            <div class="tab" data-tab="register">注册</div>
        </div>
        
        <div id="login-tab" class="tab-content active">
            <div class="form-group">
                <label for="login-username">用户名</label>
                <input type="text" id="login-username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="login-password">密码</label>
                <input type="password" id="login-password" placeholder="请输入密码">
            </div>
            <button onclick="login()">登录</button>
        </div>
        
        <div id="register-tab" class="tab-content">
            <div class="form-group">
                <label for="register-username">用户名</label>
                <input type="text" id="register-username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="register-email">邮箱</label>
                <input type="email" id="register-email" placeholder="请输入邮箱">
            </div>
            <div class="form-group">
                <label for="register-password">密码</label>
                <input type="password" id="register-password" placeholder="请输入密码">
            </div>
            <button onclick="register()">注册</button>
        </div>
    </div>
    
    <div id="notification" class="notification">操作成功!</div>
    
    <script>
        // 标签切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    const tabId = tab.getAttribute('data-tab');
                    
                    // 切换标签活动状态
                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    
                    // 切换内容显示
                    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
                    document.getElementById(`${tabId}-tab`).classList.add('active');
                });
            });
        });
        
        // 登录功能
        async function login() {
            const username = document.getElementById('login-username').value;
            const password = document.getElementById('login-password').value;
            
            if (!username || !password) {
                showNotification('请输入用户名和密码', false);
                return;
            }
            
            try {
                const response = await fetch('/api/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, password })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    // 保存令牌到本地存储
                    localStorage.setItem('token', data.token);
                    localStorage.setItem('username', data.username);
                    localStorage.setItem('role', data.role);
                    
                    showNotification('登录成功', true);
                    
                    // 延迟跳转，让用户看到成功消息
                    setTimeout(() => {
                        window.location.href = 'index.html';
                    }, 1000);
                } else {
                    showNotification(data.message || '登录失败，请检查用户名和密码', false);
                }
            } catch (error) {
                showNotification('服务器错误，请稍后再试', false);
                console.error('登录错误:', error);
            }
        }
        
        // 注册功能
        async function register() {
            const username = document.getElementById('register-username').value;
            const email = document.getElementById('register-email').value;
            const password = document.getElementById('register-password').value;
            
            if (!username || !email || !password) {
                showNotification('请填写所有必填字段', false);
                return;
            }
            
            try {
                const response = await fetch('/api/auth/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username,
                        email,
                        password
                    })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    showNotification(data.message || '注册成功，请登录', true);
                    
                    // 清空注册表单
                    document.getElementById('register-username').value = '';
                    document.getElementById('register-email').value = '';
                    document.getElementById('register-password').value = '';
                    
                    // 切换到登录标签
                    document.querySelector('.tab[data-tab="login"]').click();
                } else {
                    // 显示服务器返回的错误信息
                    showNotification(data.message || '注册失败，请稍后再试', false);
                }
            } catch (error) {
                showNotification('服务器错误，请稍后再试', false);
                console.error('注册错误:', error);
            }
        }
        
        // 显示通知
        function showNotification(message, success = true) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            
            if (success) {
                notification.classList.add('success');
                notification.classList.remove('error');
            } else {
                notification.classList.add('error');
                notification.classList.remove('success');
            }
            
            notification.classList.add('show');
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
    </script>
</body>
</html> 